import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import styles from './style.module.css';
import { showToast } from "@/utils/utils";
import { useSession } from "@/stores/sesstion";
import { getUserInfo } from "@/utils/ipc";
import { useAccount } from "@/stores/account";



export default defineComponent({
    setup(_props, _ctx) {
        const username = ref('');
        const password = ref('');
        const code = ref('');
        const router = useRouter();
        const session = useSession();
        const account = useAccount();
        const register = ref(false);

        return () => {
            return (
                <div class={["container app-wrap app-wrap-center app-wrap-vertical", styles.app]}>
                    <div class={styles.box}>
                        <h1 class={styles.loginTitle}>{register.value ? "注册" : "登录"}</h1>
                        <el-input
                            v-model={username.value}
                            placeholder="请输入账号"
                            clearable>
                        </el-input>
                        <div class="app-divider-10"></div>
                        <el-input
                            v-model={password.value}
                            placeholder="请输入密码"
                            show-password>
                        </el-input>
                        <div class="app-divider-5"></div>
                        {register.value ? (
                            <el-input
                                v-model={code.value}
                                placeholder="请输入注册码">
                            </el-input>
                        ) : ''}

                        <div class={styles.buttonArea}>
                            <el-button
                                class={styles.button}
                                type="warning"
                                onClick={async () => {
                                    if (!username.value) {
                                        showToast('请输入账号');
                                        return;
                                    }
                                    if (!password.value) {
                                        showToast('请输入密码');
                                        return;
                                    }
                                    if (register.value) {
                                        if (!code.value) {
                                            showToast('请输入注册码');
                                            return;
                                        }
                                        const result = await session.register(username.value, password.value, code.value);
                                        if (result) {
                                            code.value = '';
                                            register.value = false;
                                            showToast('注册成功');
                                            router.replace('/');
                                        }
                                        return;
                                    }

                                    const result = await session.login(username.value, password.value);
                                    if (result) {
                                        account.pullAccounts();
                                        username.value == '';
                                        password.value == '';
                                        showToast('登录成功');
                                        router.replace('/');
                                    }
                                }}>{register.value ? "注册" : "登录"}</el-button>
                        </div>
                        <div class={styles.textAres}>
                            <el-link type="warning" onClick={() => {
                                register.value = !register.value;
                            }}>{register.value ? "已有账号？立即登录" : "没有账号？立即注册"}</el-link>
                        </div>
                    </div>
                </div >
            );
        }
    },
});


